<script setup lang="ts">

import {router} from "../main.ts";
import {showConfirmDialog} from "vant";


const onClickLeft = () => {
  router.push('/select')
}

const on = (id : number) => {
  showConfirmDialog({
    title: '考试',
    message: '你学习进度过低，确定要考试吗？',
  })
  .then(() => {
    router.push({
      path: '/examination/select',
      query: {
        id: id
      }
    })
  })
  .catch(() => {

  })

}



</script>

<template>
  <van-nav-bar class="nav-bar"
               title="选择考试类型"
  >
  </van-nav-bar>

  <div id="building">
    <img src="../assets/最终返回键.png" class="back-btn1" alt="返回" @click="onClickLeft" />

    <div class="shade">
      <!--       <img src="../assets/最终学习方向弹出框.png" class="path-img">-->


      <van-button round class="tool-image" @click="on(1)">Java</van-button>


      <van-button round class="tool-image" @click="on(2)">Python</van-button>


      <van-button round class="tool-image" @click="on(3)">C</van-button>

      <van-button round class="tool-image" @click="on(4)">C++</van-button>



    </div>
  </div>



</template>



<style scoped>
.tool-image {
  background-image: url('https://lanyun-1325629469.cos.ap-chongqing.myqcloud.com/test/zjm_board_touxiang_02.png');
  background-size: 100% 100%;  /* 图片大小 */
  font-family: Arial, sans-serif;
  width: 80%;
  margin:5px;
}
.shade {
  position: absolute;
  top: 20%;
  left: 58%;
  transform: translateX(-50%);
  width: 80%;
}

.back-btn1 {
  position:absolute;
  float: left;
  top: -5px;
  width: 50px;
  height: 60px;
  z-index:2;
}


#building {
  width: 100%;
  height: 100%;
  background-image: url("../assets/学习路线背景.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}


.nav-bar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 46px;
  background-image: url("../assets/导航栏2.png");
  opacity: 0.6;
  z-index: 1;
}
</style>